<template>
  <div class="discover">
    <div class="nav2">
      <router-link to="/discover/tuijian">推荐</router-link>
      <router-link to="/discover/bangdan">排行榜</router-link>
      <router-link to="/discover/gedan">歌单</router-link>
    </div>
    <h3>{{ $route.params.name }}  --- {{ $route.params.age }} --- {{ $route.params.pet }}</h3>

    <!-- 二级路由出口 -->
    <router-view />
  </div>
</template>

<script>
export default {

}
</script>

<style>
    .discover {
        width: 100vw;
        height: 100vh;
    }

    .nav2 {
      background-color: #f00;
      display: flex;
      height: 30px;
      align-items: center;
    }

    .nav2 a {
      text-align: center;
      color:#fff;
      text-decoration: none;
      flex:1;
    }

    .nav2 a.router-link-active {
      color: #0094ff;
    }
</style>